<template>
  <div class="role-switch-page">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="back-button" @click="goBack">
        <i class="iconfont icon-left"></i>
      </div>
      <div class="page-title">角色切换</div>
      <div class="placeholder"></div>
    </div>

    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="menu-item" :class="{ active: activeMenu === 'home' }" @click="navigateTo('/')">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'role-query' }" @click="navigateTo('/school/role-query')">
        <i class="iconfont icon-search"></i>
        <span>角色查询</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'college-confirm-records' }" @click="navigateTo('/school/college-confirm-records')">
        <i class="iconfont icon-record"></i>
        <span>学院确认记录</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'all-report-records' }" @click="navigateTo('/school/all-report-records')">
        <i class="iconfont icon-report"></i>
        <span>全校上报记录</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'role-switch' }" @click="navigateTo('/school/role-switch')">
        <i class="iconfont icon-switch"></i>
        <span>角色切换</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'exempt-report' }" @click="navigateTo('/school/exempt-report')">
        <i class="iconfont icon-exempt"></i>
        <span>免上报登记</span>
      </div>
      <div class="menu-item" :class="{ active: activeMenu === 'report-time' }" @click="navigateTo('/school/report-time')">
        <i class="iconfont icon-time"></i>
        <span>上报时间</span>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <h2 class="section-title">可切换角色</h2>
      <div class="role-cards">
        <div class="role-card" @click="switchRole('counselor')">
          <div class="role-icon">
            <i class="iconfont icon-counselor"></i>
          </div>
          <div class="role-info">
            <div class="role-name">辅导员</div>
            <div class="role-desc">管理学生上报、查看上报记录</div>
          </div>
          <div class="role-action">
            <i class="iconfont icon-right"></i>
          </div>
        </div>

        <div class="role-card" @click="switchRole('college')">
          <div class="role-icon">
            <i class="iconfont icon-college"></i>
          </div>
          <div class="role-info">
            <div class="role-name">学院</div>
            <div class="role-desc">确认辅导员上报、管理学院数据</div>
          </div>
          <div class="role-action">
            <i class="iconfont icon-right"></i>
          </div>
        </div>

        <div class="role-card active">
          <div class="role-icon">
            <i class="iconfont icon-school"></i>
          </div>
          <div class="role-info">
            <div class="role-name">学校</div>
            <div class="role-desc">查看全校数据、管理系统设置</div>
          </div>
          <div class="role-status">
            <span>当前角色</span>
          </div>
        </div>
      </div>

      <div class="role-permissions">
        <h2 class="section-title">角色权限说明</h2>
        <div class="permission-list">
          <div class="permission-item">
            <div class="permission-title">辅导员</div>
            <div class="permission-desc">
              <p>- 管理学生上报信息</p>
              <p>- 查看学生上报记录</p>
              <p>- 处理学生免上报申请</p>
              <p>- 提交上报数据至学院</p>
            </div>
          </div>

          <div class="permission-item">
            <div class="permission-title">学院</div>
            <div class="permission-desc">
              <p>- 查看辅导员上报记录</p>
              <p>- 确认辅导员上报数据</p>
              <p>- 管理学院免上报申请</p>
              <p>- 提交确认数据至学校</p>
            </div>
          </div>

          <div class="permission-item">
            <div class="permission-title">学校</div>
            <div class="permission-desc">
              <p>- 查看全校上报数据</p>
              <p>- 查看学院确认记录</p>
              <p>- 管理系统设置</p>
              <p>- 设置上报时间</p>
              <p>- 管理成员权限</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoleSwitch',
  data() {
    return {
      activeMenu: 'role-switch'
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    navigateTo(path) {
      this.$router.push(path)
    },
    switchRole(role) {
      // 根据角色切换到对应的页面
      switch(role) {
        case 'counselor':
          this.$router.push('/counselor/role-confirm')
          break
        case 'college':
          this.$router.push('/college/role-confirm')
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.role-switch-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #1890ff;
  color: white;
  padding: 0 15px;
}

.back-button {
  font-size: 20px;
  cursor: pointer;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
}

.placeholder {
  width: 20px;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 50px;
  bottom: 0;
  width: 80px;
  background-color: #001529;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
}

.menu-item i {
  font-size: 24px;
  margin-bottom: 5px;
}

.menu-item.active {
  background-color: #1890ff;
}

.main-content {
  margin-left: 80px;
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.role-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.role-card {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.role-card:hover {
  transform: translateY(-3px);
}

.role-card.active {
  border-left: 4px solid #1890ff;
  cursor: default;
}

.role-icon {
  width: 50px;
  height: 50px;
  background-color: #e6f7ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.role-icon i {
  font-size: 24px;
  color: #1890ff;
}

.role-info {
  flex: 1;
}

.role-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.role-desc {
  font-size: 12px;
  color: #666;
}

.role-action i {
  font-size: 18px;
  color: #999;
}

.role-status {
  background-color: #1890ff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.role-permissions {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.permission-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.permission-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #1890ff;
}

.permission-desc p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}
</style>